<template>
    <div id="radar" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import { createPinia } from 'pinia'
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TitleComponentOption,
  LegendComponent,
  LegendComponentOption
} from 'echarts/components';
import { RadarChart, RadarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { useChartsStore } from '@/stores/charts';
const pinia = createPinia();
const chartStore = useChartsStore(pinia)
echarts.use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer]);

type EChartsOption = echarts.ComposeOption<
  TitleComponentOption | LegendComponentOption | RadarSeriesOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})

let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
var chartDom = document.getElementById('radar')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;

option = {
    color: chartStore.colorsThree,
    title: {
        show: false,
        text: ''
    },
    legend: {
        left: 'left',
        itemWidth: 10,
        itemHeight: 10,
        data: props.data.seriesDataList.map(m => m.name)
    },
    radar: {
        // shape: 'circle',
        axisName: {
            show: true,
            formatter: function (value) {
                return value;
            }
        },
        axisLine:{
            show: false,
            lineStyle: {
                // color: 'red'
            }
        },
        axisTick:{
            show: false,
            lineStyle: {
                color: 'red'
            }
        },
        axisLabel: {
            show: true,
            color: '#000',
            formatter: function (value) {
                return value + 'k';
            },
            showMaxLabel: true,
            showMinLabel: false
        },
        indicator: props.data.radarDataList
    },
    series: [
        {
        name: 'Budget vs spending',
        type: 'radar',
        data: props.data.seriesDataList
        }
    ]
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>